<template>
  <PageTabelLayout>
    <template #pageHeader>
      <div class="my-header" v-if="headerShow">
        <a-form size="small" :model="searchData" auto-label-width layout="inline">
          <a-form-item label-col-flex="100px" :style="{width:'340px'}" label="流转卡号">
            <a-input class="bacClass" allow-clear v-model="searchData.flowCardCode"/>
          </a-form-item>
          <a-form-item label-col-flex="100px" :style="{width:'340px'}" label="客户名称">
            <a-input class="bacClass" allow-clear v-model="searchData.customName"/>
          </a-form-item>
          <a-form-item label-col-flex="100px" :style="{width:'340px'}" label="客户订单">
            <a-input class="bacClass" allow-clear v-model="searchData.customOrderCode"/>
          </a-form-item>
          <a-form-item label-col-flex="100px" :style="{width:'340px'}" label="业务员">
            <a-input class="bacClass" style="width:242px" allow-clear v-model="searchData.salesman"/>
          </a-form-item>
          <a-form-item label-col-flex="100px" :style="{width:'340px'}" label="计划单号">
            <a-input class="bacClass" allow-clear v-model="searchData.planOrderCode"/>
          </a-form-item>
          <a-form-item label-col-flex="100px" :style="{width:'340px'}" label="设备编号">
            <a-input class="bacClass" allow-clear v-model="searchData.controlMachineCode"/>
          </a-form-item>
          <a-form-item label-col-flex="100px" :style="{width:'340px'}" label="客订名称">
            <a-input class="bacClass" allow-clear v-model="searchData.customOrderName"/>
          </a-form-item>
          <a-form-item label-col-flex="100px" :style="{width:'340px'}" label="色号">
            <a-input class="bacClass" allow-clear v-model="searchData.colorCode"/>
          </a-form-item>
          <a-form-item label-col-flex="100px" :style="{width:'340px'}" label="色称">
            <a-input class="bacClass" allow-clear v-model="searchData.colorName"/>
          </a-form-item>
          <a-form-item label-col-flex="100px" :style="{width:'340px'}" label="布号">
            <a-input class="bacClass" allow-clear v-model="searchData.greyCode"/>
          </a-form-item>
          <a-form-item label-col-flex="100px" :style="{width:'340px'}" label="车间">
            <a-input class="bacClass" allow-clear v-model="searchData.workshop"/>
          </a-form-item>
          <a-form-item label-col-flex="100px" :style="{width:'340px'}" label="品名">
            <a-input class="bacClass" allow-clear v-model="searchData.productName"/>
          </a-form-item>
          <a-form-item label-col-flex="100px" :style="{width:'340px'}" label="排产日期" field="craftType"
                       :validate-trigger="['change', 'blur']">
            <a-range-picker popup-container="html" class="bacClass" allow-clear @change="changeSchedul"/>
          </a-form-item>
          <a-form-item label-col-flex="100px" :style="{width:'340px'}" label="开卡日期" field="craftType"
                       :validate-trigger="['change', 'blur']">
            <a-range-picker popup-container="html" class="bacClass" allow-clear @change="changeCreateOrder"/>
          </a-form-item>
          <a-form-item label-col-flex="100px" :style="{width:'340px'}" label="染部收单时间" field="craftType"
                       :validate-trigger="['change', 'blur']">
            <a-range-picker popup-container="html" class="bacClass" allow-clear @change="changerHarvest"/>
          </a-form-item>
          <a-form-item label-col-flex="100px" :style="{width:'340px'}" label="汇总">
            <a-select popup-container="html" allow-clear class="bacClass" v-model="searchData.collect">
              <a-option value="">不汇总</a-option>
              <a-option value="0">按设备</a-option>
              <a-option value="1">按客户</a-option>
            </a-select>
          </a-form-item>
          <a-form-item label-col-flex="100px" :style="{width:'340px'}" label="毛坯出库">
            <a-select popup-container="html" allow-clear class="bacClass" v-model="searchData.workblank">
              <a-option value="">全部</a-option>
              <a-option value="0">未出库</a-option>
              <a-option value="1">已出库</a-option>
            </a-select>
          </a-form-item>
          <a-form-item label-col-flex="100px" :style="{width:'340px'}" label="染色完成">
            <a-select popup-container="html" allow-clear class="bacClass" v-model="searchData.workblank">
              <a-option value="全部">全部</a-option>
              <a-option value="已出库">已出库</a-option>
              <a-option value="未出库">未出库</a-option>
            </a-select>
          </a-form-item>
          <a-form-item label-col-flex="100px" :style="{width:'340px'}" label="排产情况">
            <a-select popup-container="html" allow-clear class="bacClass" v-model="searchData.rowCase">
              <a-option value="">全部</a-option>
              <a-option value="0">未派</a-option>
              <a-option value="1">已排</a-option>
            </a-select>
          </a-form-item>
          <a-form-item label-col-flex="100px" :style="{width:'340px'}" label="缸卡打印">
            <a-select popup-container="html" allow-clear class="bacClass" v-model="searchData.printState">
              <a-option value="">全部</a-option>
              <a-option value="0">未打印</a-option>
              <a-option value="1">已打印</a-option>
            </a-select>
          </a-form-item>
          <a-form-item label-col-flex="100px" :style="{width:'340px'}" label="进度完成" v-model="searchData.schedule">
            <a-select popup-container="html" allow-clear class="bacClass">
              <a-option value="">全部</a-option>
              <a-option value="0">已完成</a-option>
              <a-option value="1">未完成</a-option>
            </a-select>
          </a-form-item>
        </a-form>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up v-if="headerShow" @click="changHeadShow(false)" :strokeWidth="2" :size="18"/>
          <icon-double-down v-else @click="changHeadShow(true)" :strokeWidth="2" :size="18"/>
        </a-divider>
      </div>
      <div class="my-tool-bar" style="padding-bottom: 10px;">
        <Toolbar :items="['查询', '打印排缸卡', '染部收单扫描', '导出']" @select="selectHandler"
                 @printArrangCard="printArrangCardHandler" @export="exportHandler" @scanDyePart="scanDyePartHndler"/>
      </div>
    </template>
    <template #pageTabel>
      <a-spin :loading="pageLoading" tip="加载中" dot style="height:99%;width: 100%;z-index:999 ;">
        <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple"
                         @grid-ready="gridReady" style="height:calc(100% - 45px);" class='ag-theme-alpine'
                         :defaultColDef="defaultColDef"
                         :rowData="table.dataList" :columnDefs="cfsValue" :localeText="localeTextData"
                         @columnResized="onColumnResized"
                         @columnMoved="onColumnMoved"></AgGridVuesCopys>
      </a-spin>
    </template>
    <!-- <paginationCopys :total="total" show-total show-jumper show-page-size @change="changePage"
        @page-size-change="changeSize" style="justify-content: center;margin-top: 10px;"
        :page-size="pagination.pageSize" :current="pagination.page" /> -->

    <a-drawer :drawer-style="{ zIndex: 9999 }" height="100%" unmountOnClose :visible="pageData.showSpeed"
              :mask-closable="false" placement="bottom" @cancel="pageData.showSpeed = false">
      <template #title>车间进度</template>
      <workShopSpeed :flowCardCode="recordData.flowCardCode"/>
      <template #footer>
        <a-button @click="pageData.showSpeed = false">
          关闭
        </a-button>
        <a-button type="primary" @click="toExportRow">
          导出
        </a-button>
      </template>
    </a-drawer>
    <a-modal :visible="pageData.showOver" :footer="false" unmountOnClose @cancel="pageData.showOver = false">
      <template #title> 染部收单查询</template>
      <div class="toFlex">
        <span style="white-space: nowrap;margin-right: 10px;">扫描流程卡: </span>
        <a-input allow-clear @change="followChange" class="bacClass"></a-input>
      </div>
    </a-modal>
  </PageTabelLayout>
</template>

<script lang="ts">
import PageTabelLayout from '@/components/pageTabelLayout.vue';
import {ref, reactive, onMounted} from 'vue';

import {localeText} from '@/api/aggridZw'
import emitter from '@/hooks/useEventBus'
import {usePagination, useTable} from '@/hooks/table';
import {Message} from '@arco-design/web-vue';
import {assTable} from '@/utils/assemblyLevelTable';
import {vatExhaut} from '@/api/DyeingshopManagement/DyeVatSchedu';
import {saveOrUpdateGridState as saveOrUpdateGridState01} from '@/hooks/useGridState'

import dayjs from 'dayjs';

export default {
  name: "cylinderInfo",
  setup() {
    const vatExhautApi = vatExhaut();
    let headerShow = ref<boolean>(true);
    let changHeadShow = (boolVal: boolean) => {
      headerShow.value = boolVal;
      emitter.emit('window-change');
    };
    const searchData = reactive<{
      flowCardCode: string;
      customOrderCode: string;
      customName: string;
      account: string;
      planOrderCode: string;
      controlMachineCode: string;
      customOrderName: string;
      colorCode: string;
      colorName: string;
      greyCode: string;
      productName: string;
      createOrderDate: string;
      schedulDate: string;
      workshop: string;
      harvestDate: string;
      collect: string;
      workblank: string;
      dyeFinish: string;
      rowCase: string;
      printState: string;
      schedule: string;
    }>({
      flowCardCode: '',
      customOrderCode: '',
      customName: '',
      account: '',
      planOrderCode: '',
      controlMachineCode: '',
      customOrderName: '',
      colorCode: '',
      colorName: '',
      greyCode: '',
      productName: '',
      createOrderDate: '',
      schedulDate: "",
      workshop: '',
      harvestDate: '',
      collect: '',
      workblank: '',
      dyeFinish: '',
      rowCase: '',
      printState: '',
      schedule: ''
    });
    const changeSchedul = (date: any) => {
      searchData.schedulDate = date ? date[0] : '';
    };
    const changeCreateOrder = (date: any) => {
      searchData.createOrderDate = date ? date[0] : '';
    };
    const changerHarvest = (date: any) => {
      searchData.harvestDate = date ? date[0] : '';
    }
    onMounted(() => {
      // 第一个页面需要在刚进入就调用一次  切换tap时也需要调用
      doRefresh();
      emitter.on("refresh-cylinderInfo", () => {
        doRefresh();
        // gridOption.value.sizeColumnsToFit();
      });
    });
    const pageLoading = ref(false)
    const doRefresh = async () => {
      pageLoading.value = true
      // updateGridState01()
      await vatExhautApi.getVantArrage({...searchData}).then((res: any) => {
        if (res.code === 200) {
          console.log(res.data);
        } else {
          Message.error('数据查询失败')
        }
      })
      pageLoading.value = false
    };
    const selectHandler = () => {
      doRefresh();
    };
    const printArrangCardHandler = () => {
    };
    const exportHandler = () => {
      let selectList = gridOption.value.getSelectedRows();
      // console.log(selectList);
      if (selectList.length === 0) {
        Message.error('请勾选需要导出的数据')
        return
      } else {
        //导出数据
        let nowRow = table.dataList.filter(function (o) {
          return (gridOption.value.getSelectedRows().map((o: any) => {
            return o.id
          })).indexOf(o["id"]) !== -1;
        })
        assTable(cfsValue, nowRow, '排缸信息');
      }
    };
    const scanDyePartHndler = () => {
      pageData.showOver = true;

    };
    const gridOption = ref();
    const colState = ref()
    const gridReady = (params: any) => {
      gridOption.value = params.api
      colState.value = params.columnApi
    }
    const defaultColDef = {
      sortable: true,
      resizable: true,
      filter: true,
      // flex: 1,
      width: 150,
    }
    const pageData = reactive<{
      showSpeed: boolean,
      showOver: boolean,
    }>({
      showSpeed: false,
      showOver: false
    })
    const cfsValue = [
      {
        headerName: '开卡日期',
        field: 'createOrderDate',
      },
      {
        headerName: '车间',
        field: 'workshop',
      },
      {
        headerName: '设备编号',
        field: 'controlMachineCode',
      },
      {
        headerName: '染缸生产序号',
        field: 'schedulOrderId',
      },
      {
        headerName: '流转卡号',
        field: 'flowCardCode',
      },
      {
        headerName: '客户名称',
        field: 'customName',
      },
      {
        headerName: '品名',
        field: 'productName',
      },
      {
        headerName: '色号',
        field: 'colorCode',
      },
      {
        headerName: '布号',
        field: 'greyCode',
      },
      {
        headerName: '匹数',
        field: 'houseNum',
      },
      {
        headerName: '染整单号',
        field: 'dyeOrderCode',
      },
      {
        headerName: '重量',
        field: '',
      },
      {
        headerName: '实际重量',
        field: '',
      },
      {
        headerName: '确认色',
        field: '',
      },
      {
        headerName: '等待工序',
        field: 'waitProcess',
      },
      {
        headerName: '部门',
        field: 'department',
      },
      {
        headerName: '客户订单号',
        field: 'customOrderCode',
      },
      {
        headerName: '客订名称',
        field: 'customOrderName',
      },
      {
        headerName: '计划单号',
        field: 'planOrderCode',
      },
      {
        headerName: '拼缸流转卡号',
        field: '',
      },
      {
        headerName: '坯布编号',
        field: 'greyCodeNum',
      },
      {
        headerName: '排产日期',
        field: 'schedulDate',
      },
      {
        headerName: '快反日期',
        field: '',
      },
      {
        headerName: '色样要求',
        field: 'labDips',
      },
      {
        headerName: '染色计划开始时间',
        field: '',
      },
      {
        headerName: '染色计划结束时间',
        field: '',
      },
      {
        headerName: '染色实际开始时间',
        field: '',
      },
      {
        headerName: '染色实际结束时间',
        field: '',
      },
      {
        headerName: '排产人',
        field: '',
      },
      {
        headerName: '回修原因',
        field: 'returnRemark',
      },
      {
        headerName: '备注',
        field: 'remark',
      },
      {
        headerName: '工艺类型',
        field: 'jobType',
      },
      {
        headerName: '色系',
        field: 'colourScheme',
      },
      {
        headerName: '染色类型',
        field: 'dyeingType',
      },
      {
        headerName: '毛坯出库状态',
        field: 'workblank',
        cellRenderer: {
          template: `
            <div>{{ workStatus }}</div>`,
          setup(props: any) {
            let workStatus = props.data.workblank > 0 ? '已出库' : '未出库';
            return {
              workStatus
            }
          }
        }
      },
      {
        headerName: '毛坯出库时间',
        field: 'updateTime',
      },
      {
        headerName: '进度完成',
        field: 'schedule',
        cellRenderer: {
          template: `
            <div>{{ schedule }}</div>`,
          setup(props: any) {
            let schedule = props.data.schedule > 0 ? '已完成' : '未完成';
            return {
              schedule
            }
          }
        }
      },
      {
        headerName: '缸型',
        field: 'cylinderType',
      },
      {
        headerName: '门幅',
        field: 'larghezza',
      },
      {
        headerName: '克重',
        field: 'gramWeight',
      },
      {
        headerName: '是否已打印',
        field: 'updateTime',
      },
      {
        headerName: '流转卡类型',
        field: 'exchangeCalorieType',
      },
      {
        headerName: '班次',
        field: '',
      },
      {
        headerName: '操作',
        field: 'action',
        resizable: false,
        filter: false,
        sortable: false,
        lockPosition: 'right',
        width: '100',
        pinned: 'right',
        cellRenderer: {
          template: `
            <a-tag color="#30be16" @click="a" class="gesture">车间进度</a-tag>`,
          setup(props: any) {
            const a = () => {
              lookOverHandler(props.params.data)
            }
            return {
              a
            }
          }
        },
      },
    ];
    const total = ref(10);
    const changePage = (val: any) => {
      pagination.page = val
      doRefresh();
    }
    const changeSize = (val: any) => {
      pagination.pageSize = val
      doRefresh();
    }
    const pagination = usePagination(doRefresh);
    const localeTextData: any = ref(localeText);
    const table = useTable();
    const recordData: any = ref();
    const lookOverHandler = (record: any) => {
      // console.log(record);
      pageData.showOver = true;
      recordData.value = record;
    }
    const toExportRow = () => {
      emitter.emit('export-speed');
    };
    const followChange = async (flowCardCode: any) => {
      // console.log(code)
      let data = {flowCardCode, scanDate: dayjs(new Date()).format('YYYY-MM-DD')};
      let res: any = await vatExhautApi.scanHarverstInsert({...data});
      if (res.code === 200) {
        Message.success(res.message);
        pageData.showOver = false;
        doRefresh();
      } else {
        Message.error(res.message);
      }
    };
    const {saveGridState: saveGridState01, updateGridState: updateGridState01} = saveOrUpdateGridState01('cylinderInfo01', gridOption, colState, cfsValue)
    const onColumnMoved = () => {
      saveGridState01()
    }
    const onColumnResized = () => {
      saveGridState01()
    }
    return {
      pageLoading,
      saveOrUpdateGridState01,
      saveGridState01,
      updateGridState01,
      onColumnMoved,
      onColumnResized,
      colState,
      headerShow,
      changHeadShow,
      searchData,
      selectHandler,
      printArrangCardHandler,
      exportHandler,
      scanDyePartHndler,
      localeTextData,
      pagination,
      changeSize,
      total,
      changePage,
      gridReady,
      defaultColDef,
      cfsValue,
      table,
      pageData,
      toExportRow,
      followChange,
      changeSchedul,
      changeCreateOrder,
      changerHarvest,
      recordData
    }
  },
  components: {PageTabelLayout, }
}
</script>

<style scoped>
.toFlex {
  display: flex;
  align-items: center;
  margin-left: 45px;
}

.main-container {
  height: 100%;
}

.arco-drawer-header .arco-drawer-title {
  width: 100%;
}


.bacClass {
  background: #fff;
  width: 270px;
  border: 1px solid #c9cdd3;
}

:deep(.ag-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
  user-select: initial;
  -moz-user-select: text;
  -ms-user-select: text;
  -webkit-user-select: text;
}

.aInputLine {
  border: 1px solid #c9cdd3;
  background: #fff;
}

:deep(.arco-picker input) {
  padding-left: 0 !important;
}

:deep(.arco-picker) {
  padding-left: 0 !important;
}

:deep(.arco-picker-separator) {
  padding: 0 !important;
}
</style>